<script setup>

import {useRouter} from "vue-router";
import {computed, onMounted, reactive, ref} from "vue";
import axios from "axios";
import {Delete, InfoFilled, View} from "@element-plus/icons-vue";
import qs from "qs";
import {ElMessage} from "element-plus";

let loading = ref(false);
const router=useRouter();
let businessList=ref([]);


const formRef=ref()
let user;
let currentPage=ref(1);
let total=ref(0);
let pageSize=ref(5)
let keywords=ref('')
let avatar=ref('')


onMounted( () => {
  // user = JSON.parse(sessionStorage.getItem("user"));
  getBusinessList();

  // console.log(pagedShopList.value);
})



function getBusinessList() {
  loading.value=true
  axios.get("/admin/getAllBusiness",
      {
          params: {pageSize:pageSize.value,
          pageNum:currentPage.value
        }
      }).then(res=>{

    console.log(res.data)
    businessList.value=res.data.list
    total.value=res.data.totalCount
    }).catch(err=>{

    }).finally(()=>{
      loading.value=false
    })
}




function handleSizeChange(newSize){
  pageSize.value=newSize
  getBusinessList()
}
function handleCurrentChange(newPage){
  // console.log(newPage)
  currentPage.value=newPage
  getBusinessList()
}
async function search() {
  const response = await axios.get("/admin/getAllBusiness",
      {
        params: {
          pageSize: pageSize.value,
          pageNum: currentPage.value,
          keywords:keywords.value
        }
      });
  console.log(response.data)
  businessList.value = response.data.list
  total.value = response.data.totalCount

}

function clean(){
  keywords.value=''
  getBusinessList();
}

function gotoFoodInfo(businessId,businessName){
  router.push({
    path: '/admin/foodInfo',
    query: { businessId: businessId ,businessName:businessName}
  });
}



</script>

<template>
  <div style="margin: 10px 0">
    <el-input style="width: 400px;margin: 10px 5px" placeholder="请输入名称" suffix-icon="el-icon-search" v-model="keywords"></el-input>
    <el-button type="primary" style="margin-left: 5px;" @click="search">搜索 <i
        class="el-icon-search"></i></el-button>
    <el-button type="primary" style="margin-left: 5px;" @click="clean">清除 <i class="el-icon-refresh"></i>
    </el-button>
  </div>

  <el-table :data="businessList" border stripe v-loading="loading">

    <el-table-column prop="businessId" label="ID" >
    </el-table-column>
    <el-table-column prop="businessName" label="门店名" >
    </el-table-column>

    <el-table-column label="操作" >
      <template #default="scope">
        <el-button type="success" @click="gotoFoodInfo(scope.row.businessId,scope.row.businessName)"><el-icon style="margin-right: 3px" ><View /></el-icon> 查看</el-button>
      </template>
    </el-table-column>
  </el-table>
<!--  <div style="padding: 10px 30px">-->
<!--    <el-pagination-->
<!--        @size-change="handleSizeChange"-->
<!--        @current-change="handleCurrentChange"-->
<!--        :current-page="pageNum"-->
<!--        :page-sizes="[2, 5, 10, 20]"-->
<!--        :page-size="pageSize"-->
<!--        layout="total, sizes, prev, pager, next, jumper"-->
<!--        :total="total">-->
<!--    </el-pagination>-->
<!--  </div>-->


  <div class="example-pagination-block">

    <el-pagination
        v-model:current-page="currentPage"
        v-model:page-size="pageSize"
        :page-sizes="[5, 10, 20]"
        layout="total,sizes, prev, pager, next"
        :total="total"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
    />
  </div>
</template>

<style scoped>

.card{
  width: 100%;
}
.card .image{
  width: 100px;
  height: 100px;
}


.text {
  font-size: 14px;
}

.item {
  margin-bottom: 18px;
  margin-right: 5px;
}



.example-pagination-block{
  display: flex;
  justify-content: center;
  margin-top: 50px;
}
.image_1 {
  width: 275px;
  height: 260px;
  background: #ffffff;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}
.error {
  margin: 100px auto;
  width: 50%;
  padding: 10px;
  text-align: center;
}
</style>